<template>
  <page-header-wrapper :title="false" >
    <a-card title="员工详情">
      <template #extra> <a-button type="primary" @click="handleEdit(detail)">编辑员工</a-button></template>
      <a-descriptions bordered title="" size="small">
        <a-descriptions-item label="姓名" :span="3">{{ detail.userName }}</a-descriptions-item>
        <a-descriptions-item label="联系电话" :span="3">{{ detail.phone }}</a-descriptions-item>
        <a-descriptions-item label="身份证号" :span="3">{{ detail.idCard }}</a-descriptions-item>
        <a-descriptions-item label="归属店" :span="3">{{ detail.storeName }}</a-descriptions-item>
        <a-descriptions-item label="职务" :span="3">{{ detail.jobName }}</a-descriptions-item>
        <a-descriptions-item label="员工状态" :span="3">
          <a-tag color="#82af6f" v-if="detail?.empStatus == 1">在职</a-tag>
          <a-tag color="#abbac3" v-else>离职</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="入职日期" :span="3">{{ detail.inDate }}</a-descriptions-item>
        <a-descriptions-item label="会员数" :span="3">{{ detail.vipNumber }}</a-descriptions-item>
      </a-descriptions>
      <div style="display:flex;margin-top:10px">
        <a-button type="danger" style="margin-right:5px" @click="setLz()" v-if="detail?.empStatus == 1">员工离职</a-button>
        <a-button type="primary" style="margin-right:5px" @click="setLz()" v-else>员工复职</a-button>
        <a-button type="primary" style="margin:0px 5px" @click="setCz()">重置密码</a-button>
        <a-button type="success" style="margin:0px 5px" @click="setParams()">设置权限</a-button>
      </div>
    </a-card>
    <create-form
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :model="mdl"
      @cancel="handleCancel"
      @ok="handleOk"
    />
  </page-header-wrapper>
</template>
  
<script>
import moment from 'moment'
import { getEmployeesDetailUsingGET,updateEmployeesUsingPOST,resetPasswordUsingPOST} from  '@/api/api/yuangongguanli.ts'
  import { STable } from '@/components'
  import CreateForm from './CreateForm'
  export default {
    name: 'UserDetail',
    components: {
      STable,
      CreateForm
    },
    data () {
      return {
        mdl: null,
        visible: false,
        value:'',
        confirmLoading:false,
        detail:{},
      }
    },
    mounted(){
     this.getDetail()
    },
    methods:{
      setLz(){
        const that = this
        that.$confirm({
          title: `${that.detail.empStatus == '1' ? '离职' :'复职'}` ,
          content:`你确定这名员工已经${that.detail.empStatus == '1' ? '离职' :'复职'}吗？`,
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            const params = {
              id:that.detail.id,
              empStatus:that.detail.empStatus == '1' ? '2': '1'
            }
            updateEmployeesUsingPOST({...params}).then(() => { 
              that.getDetail()
              that.$message.success('操作成功')
              })
              .catch((error) => {
                that.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
              })
          },
        })
      },
      setCz(){
        const that = this
        that.$confirm({
          title: '重置密码',
          content: '你确定要重置密码吗？',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            resetPasswordUsingPOST({ id: that.detail.id }).then(() => { 
              that.getDetail()
              that.$message.success('操作成功')
              })
              .catch((error) => {
                that.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
              })
          },
        }) 
      },
      setParams(){
        this.$router.push({ path: `/user/competenceSetting/index` })
      },
      getDetail(){
        getEmployeesDetailUsingGET({id:this.$route.params.id}).then((res) => {
          this.detail = res.data
        })
        .catch(() => {
          this.$message.error('获取详情失败,请联系管理员')
        })
      },
      handleEdit (record) {
        this.mdl = { ...record }
        this.confirmLoading = false
        this.visible = true
      },
      handleOk () {
        this.visible = false
        this.confirmLoading = true
        const form = this.$refs.createModal.form
        form.validateFields((errors, values) => {
        if (!errors) {
          const params = {
              ...values,empType:1,inDate:values?.inDate
            }
          updateEmployeesUsingPOST({...params}).then(() => { 
              this.getDetail()
              this.$message.success('修改成功')
            })
            .catch((error) => {
              this.confirmLoading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        } else {
          this.confirmLoading = false
        }
      })
      },
      handleCancel () {
        this.visible = false
        this.confirmLoading = false
        const form = this.$refs.createModal.form
        form.resetFields() // 清理表单数据（可不做）
      },
    }
   
  }
  </script>